<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<script type="text/javascript" src="./dist/jquery-3.2.1.js"></script>
	<script type="text/javascript" src="./dist/js/bootstrap.js"></script>
	<link rel="stylesheet" type="text/css" href="./dist/css/bootstrap.css">
	<link rel="stylesheet" type="text/css" href="./font/iconfont.css">
	<title></title>
</head>
<style type="text/css">
	*{margin:0;padding:0;}
	.input-group{margin-top:15px;}
</style>
<body>
	<h3>各种内嵌按钮设计</h3>
<form>
	<!-- 输入组嵌入下拉菜单 -->
	<div class='input-group'>
		<div class="input-group-btn">
			<button class='btn btn-primary' data-toggle='dropdown'>GO<span class='caret'></span></button>
			<ul class='dropdown-menu'>
				<li>选型一</li>
				<li>选项二</li>
			</ul>
		</div>
		<input type="text" class="form-control">
	</div>
<div class='input-group'>
	<div class="input-group-addon">
		<input type="checkbox" name="">
	</div>
	<input type="text" class="form-control">
</div>
<div class="input-group">
	<div class="input-group-addon">
		<input type="radio" name="a">
	</div>
	<input type="text" class='form-control'>
</div>
<div class='form-group'>
	<label>复选框：</label>
	<div class="checkbox">
		<label>
			<input type="checkbox" name="">选项一
		</label>
	</div>
	<div class="checkbox">
		<label>
			<input type="checkbox" name="">选项二
		</label>
	</div>
</div>
<div class="form-group">
	<label>单选框：</label>
	<div class="radio">
		<label>
			<input type="radio" name="a">选项一
		</label>
	</div>
	<div class="radio">
		<label>
			<input type="radio" name="a">选项二
		</label>
	</div>
</div>
</form>
</body>
</html>